<template>
  <table class="my-table">
    <thead class="table_h">
    <tr class="table_th">
      <th>政策</th>
      <th>发布时间</th>
      <th>政策时效</th>
    </tr>
    </thead>
    <tbody style="flex: 1">
    <div v-if="loading" v-loading="loading" class="table-loading" style="height: 100%"></div>
    <vue3-seamless-scroll v-else :list="tableData" direction="up" :hover="true" :limitScrollNum="1" :step="step"
                          class="seamless-warp">
      <tr class="table_td" v-for="(item, index) in tableData" :key="index" @click="onTableRowClick(item)">
        <td>{{ item.title }}</td>
        <td>{{ item.publishTime }}</td>
        <td height="100%">{{ item.policyValidityTime }}</td>
      </tr>
    </vue3-seamless-scroll>
    </tbody>
  </table>
  <el-dialog
    v-model="dialogVisible"
    class="policy-list-detail-modal"
    title="政策详情"
    width="30%"
    top="25vh"
    @close="dialogClose"
  >
    <div class="policy-detail-content">
      <div><span>政策：</span><span>{{ dialogObjData?.title }}</span></div>
      <div><span>发布时间：</span><span>{{ dialogObjData?.publishTime }}</span></div>
      <div><span>政策时效：</span><span>{{ dialogObjData?.policyValidityTime }}</span></div>
      <div><span>政策内容：</span><div>{{ dialogObjData?.content }}</div></div>
    </div>
  </el-dialog>
</template>

<script setup>
import {Vue3SeamlessScroll} from "vue3-seamless-scroll";
import {onMounted, onUnmounted, ref} from "vue";
// 接收参数

const props = defineProps({
  tableData: {
    type: Array,
    default: () => [],
  },
  loading: { // 加载中loading
    type: Boolean,
    default: false
  }
});

const defaultDialogObjData = { // dialog初始值
  title: '',
  publishTime: '',
  policyValidityTime: '',
  content: ''
}

const step = ref('0')
const dialogVisible = ref(false)
const dialogObjData = ref({
  title: '',
  publishTime: '',
  policyValidityTime: '',
  content: ''
})

const onTableRowClick = (item) => {
  dialogVisible.value = true
  dialogObjData.value = item
}

const calculateStep = () => {
  // 获取视口的高度
  const viewportHeight = window.innerHeight;
  if (props?.tableData.length > 5) {
    step.value = viewportHeight * 0.0003;
  }
};

const dialogClose = () => {
  dialogObjData.value = {...defaultDialogObjData}
}
onMounted(() => {
  calculateStep();
  window.addEventListener("resize", calculateStep);
});
onUnmounted(() => {
  window.removeEventListener("resize", calculateStep);
});
</script>

<style lang="less" scoped>
.my-table {
  border-collapse: collapse;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.table_h {
  width: 100%;
}

.table_th {
  height: 42px;
  background: linear-gradient(60deg, #0E5FFF 0%, #00FFFF 100%);
  display: flex;
  color: #fff;
  align-items: center;
  font-size: 14px;

  th {
    font-weight: normal;
    text-align: left;
  }
}

.table_th th:nth-child(1) {
  flex: 2; /* 宽度比例为1 */
  padding: 0 10px;
}

.table_th th:nth-child(2),
.table_th th:nth-child(3) {
  flex: 1; /* 宽度比例为2 */
}

.table_td {
  display: flex;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  height: 45px;
  align-items: center;
  background: rgba(14, 129, 255, 0.34);
  margin-top: 10px;
  cursor: pointer;
}

.table_td td:nth-child(1) {
  flex: 2; /* 宽度比例为1 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 10px;
}

.table_td td:nth-child(2),
.table_td td:nth-child(3) {
  flex: 1; /* 宽度比例为2 */
}

.table_td td:nth-child(3) {
  display: flex;
  align-items: center;
}

.seamless-warp {
  height: 100%;
  overflow: hidden;
}
.table-loading {
  /deep/ .el-loading-mask {
    background-color: transparent;
  }
}
.policy-detail-content {
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  color: white;
  > div:not(:last-child) {
    margin-bottom: 10px;
  }
  > div:last-child {
    flex: 1;
    height: calc(100% - 110px);
    div {
      height: calc(100% - 20px);
      overflow-y: auto;
      white-space: pre-wrap;
    }
  }
}
</style>
<style lang="less">
.policy-list-detail-modal {
  height: 50%;
  overflow: hidden;
  box-sizing: border-box;
  .el-dialog__header {
    padding-right: 0;
    text-align: center;
  }
  .el-dialog__body {
    height: calc(100% - 40px);
  }
}
</style>
